<template>
  <div class="edit_form_wrap">
    <div class="edit_form">
      <a-form :form="form" @submit="editSuccess">
        <a-form-item v-bind="formItemLayout" label="user_id">
          <a-input
            v-decorator="[
          'user_id',
          {
            rules: [{ required: true, message: 'Please input your name!' }],
          },
        ]"
            style="width: 100%"
            disabled
          ></a-input>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="Name">
          <a-input
            v-decorator="[
          'name',
          {
            rules: [{ required: true, message: 'Please input your name!' }],
          },
        ]"
            style="width: 100%"
          ></a-input>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="Age">
          <a-input
            v-decorator="[
          'age',
          {
            rules: [{ required: true, message: 'Please input your age!' }],
          },
        ]"
            style="width: 100%"
          ></a-input>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="E-mail">
          <a-input
            v-decorator="[
          'email',
          {
            rules: [
              {
                type: 'email',
                message: 'The input is not valid E-mail!',
              },
              {
                required: true,
                message: 'Please input your E-mail!',
              },
            ],
          },
        ]"
          />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="Phone Number">
          <a-input
            v-decorator="[
          'tel',
          {
            rules: [{ required: true, message: 'Please input your phone number!' }],
          },
        ]"
            style="width: 100%"
          ></a-input>
        </a-form-item>
        <a-form-item v-bind="tailFormItemLayout">
          <a-button type="danger" html-type="button" class="del" @click="del">删除</a-button>
          <a-button type="primary" html-type="submit">提交</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        }
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0
          },
          sm: {
            span: 16,
            offset: 8
          }
        }
      }
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this, { name: 'edit' })
  },
  mounted () {
    this.setFormData()
  },
  methods: {
    editSuccess (e) {
      e.preventDefault()
      this.form.validateFields(async (err, values) => {
        if (!err) {
          const value = JSON.stringify(values)
          const param = new URLSearchParams()
          param.append('userinfo', value)
          console.log(param.get('userinfo'))
          const { data: res } = await this.$http.post('editUser', param)
          if (res === '成功') {
            this.$message.success('修改成功！')
            this.$router.push('/dashboard/userList')
          } else {
            this.$message.error('请检查您的输入')
          }
        }
      })
    },
    async del () {
      console.log(typeof (this.$store.state.editUserInfo.user_id))
      const param = new URLSearchParams()
      const userId = parseInt(this.$store.state.editUserInfo.user_id)
      param.append('userId', userId)
      const { data: res } = await this.$http.post('delUser', param)
      if (res === '成功') {
        this.$message.success('删除成功！')
        this.$router.push('/')
      } else {
        this.$message.error('删除失败')
      }
    },
    setFormData () {
      var that = this
      this.form.setFieldsValue({
        user_id: that.$store.state.editUserInfo.user_id,
        name: that.$store.state.editUserInfo.name,
        email: that.$store.state.editUserInfo.email,
        age: that.$store.state.editUserInfo.age,
        tel: that.$store.state.editUserInfo.tel
      })
    }
  }
}
</script>

<style lang="less" scope>
.edit_form_wrap {
  width: 100%;
  height: 100%;
  position: relative;
}
.edit_form {
  width: 500px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.del {
  margin-right: 120px;
}
</style>
